<template>
	<section class='r5px fv' :class="[_bgcolor, {ex: !auto}]" :style='{width, height, ..._style}'>
		<Title v-if='title' :title='title' :titleMode='titleMode' :config='titleConfig'/>
		<div class='ex rel' :style="{minHeight}" :class="[contentClass]">
			<div :class="[scroll?'oys scrollbar abs_full':'', paddingClass, scrollClass]">
				<slot v-if='(Array.isArray(data) && data.length > 0) || !data'></slot>
			</div>
			<Empty :data='data' simple />
			<Loading :loading='loading' />
		</div>
	</section>
</template>

<script setup>
	/* --------------------------- Function --------------------------- */
	import isColor from '@utils/isColor'
	/* --------------------------- Component --------------------------- */
	const Empty 		= $.lazy(()=>import('@antd/empty.vue'))
	const Loading 		= $.lazy(()=>import('@antd/loading.vue'))
	const Title 		= $.lazy(()=>import('#tp/title/title.vue'))
	/* --------------------------- props --------------------------- */
	const {bgcolor, style} = defineProps({
		title			: String,
		scroll			: Boolean,
		scrollClass		: String,
		contentClass	: String,
		paddingClass 	: { type:String, default:'p10' },
		minHeight 		: { type:String, default:'100px' },
		data			: { type:Array, default: null },
		loading 		: { type:Boolean, default: false },
		width			: String,
		height			: String,
		list 			: Object,
		titleConfig 	: Object,
		auto 			: Boolean,
		titleMode		: Number,
		style			: { type:Object },
		bgcolor 		: { type:[String,Boolean], default:'bcf'}
	})
	
	let _bgcolor = bgcolor
	let _style = style
	if( isColor(bgcolor) ){
		_bgcolor = ''
		_style = { backgroundColor: bgcolor, ...style}
	}
	
</script>
